<template>
  <el-row>
    <el-col :span="24">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="padding:0 40px;">
        <slot name="brfore" :data-form="dataForm" :attributes="attributes" />
        <el-form-item v-for="item in attributes" v-if="excCol == undefined || excCol.indexOf(item.name) < 0" :label="item.text" :prop="item.name">
          <template v-if="item.dictList === undefined || item.dictList === '' || item.dictList === null">
            <el-input v-if="item.type === 1" v-model="dataForm[item.name]" />
            <el-input v-if="item.type === 11" v-model="dataForm[item.name]" type="textarea" autosize />
            <richTextEdit v-if="item.type === 12" :data-form="dataForm" :data-key="item.name" />
            <upload v-if="item.type === 16 || item.type === 17" :links="dataForm[item.name]" :size="item.type === 16 ? 1 : 10" :accept="'.jpg,.jpeg,.png,.gif'" />
            <upload v-if="item.type === 13" v-model="dataForm[item.name]" :size="1" :accept="'.jpg,.jpeg,.png,.gif'" />
            <el-input-number v-if="item.type === 2" v-model="dataForm[item.name]" />
            <el-switch v-if="item.type === 21" v-model="dataForm[item.name]" />
            <el-date-picker v-if="item.type === 3" v-model="dataForm[item.name]" type="datetime" placeholder="选择日期时间" />
          </template>
          <template v-else>
            <el-radio-group v-if="item.dictList.length < 5" v-model="dataForm[item.name]" size="mini">
              <el-radio-button v-for="dict in item.dictList" :key="dict.val" :label="dict.val">{{ dict.name }}</el-radio-button>
            </el-radio-group>
            <el-select v-else v-model="dataForm[item.name]" filterable placeholder="请选择">
              <el-option v-for="dict in item.dictList" :key="dict.val" :label="dict.name" :value="dict.val" />
            </el-select>
          </template>
        </el-form-item>
        <slot name="after" :data-form="dataForm" :attributes="attributes" />
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="updateData">确定</el-button>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { initBaseApi } from '@/utils/request'
import upload from '@/components/upload/index'
import richTextEdit from '@/components/richTextEdit'
let api
export default {
  name: 'Add',
  components: { richTextEdit, upload },
  props: ['dataForm', 'cancel'],
  data() {
    return {
      rules: undefined,
      attributes: undefined,
      excCol: undefined
    }
  },
  created() {
    const models = this.$route.path.split('/')
    api = initBaseApi(models[1], models[2])
    try {
      const { rules, excCol } = require(`../rules/${models[1]}/${models[2]}/rule.js`)
      this.rules = rules
      this.excCol = excCol
    } catch (e) {
      this.rules = {}
    }
    api.getAttributes().then(res => {
      const attributes = res.data.data
      attributes.forEach(attribute => {
        if ((attribute.type === 16 || attribute.type === 17) && this.dataForm[attribute.name] === undefined) {
          this.dataForm[attribute.name] = []
        }
      })
      this.attributes = attributes
    })
  },
  methods: {
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          api[this.dataForm.id === undefined ? 'add' : 'edit'](this.dataForm).then(() => {
            this.$notify.success({
              title: '成功',
              message: '操作成功'
            })
            this.cancel()
          })
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
